<?php

/**
 * The template for displaying single posts and pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 */

get_header();
?>

<style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .text-balance {
            text-wrap: balance;
        }
        .prose-custom {
            @apply max-w-4xl mx-auto text-neutral-700 leading-relaxed;
        }
        .prose-custom p {
            @apply mb-6 text-lg md:text-xl;
        }
        .prose-custom h2 {
            @apply text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800 mb-6 mt-10;
        }
        .prose-custom h3 {
            @apply text-[clamp(1.25rem,2vw,1.75rem)] font-bold text-neutral-800 mb-4 mt-8;
        }
        .prose-custom img {
            @apply w-full h-auto rounded-xl shadow-md my-8;
        }
        .prose-custom blockquote {
            @apply border-l-4 border-primary pl-6 italic text-neutral-600 my-8;
        }
        .prose-custom code {
            @apply bg-neutral-100 text-neutral-800 px-2 py-1 rounded-md font-mono text-sm;
        }
        .prose-custom pre code {
            @apply bg-neutral-800 text-white p-4 rounded-md block overflow-x-auto;
        }
        .scroll-progress {
            @apply fixed top-0 left-0 h-1 z-50 bg-primary;
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        .animate-slide-up {
            animation: slideUp 0.5s ease-out;
        }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
</style>

<style>
    .prose-custom img {
        width: 100%;
        height: auto;
        margin-bottom: 1.5rem;
        /* 增加文字与图片的间距 */
    }

    .prose-custom {
        line-height: 1.8;
        font-size: 1.125rem;
        /* 增大文字大小 */
    }
</style>

<main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16 flex-grow">
    <!-- 面包屑导航 -->
    <div class="mb-8 animate-fade-in">
        <?php
        echo '<nav class="text-sm text-neutral-500">
                    <a href="' . home_url() . '" class="hover:text-primary transition-colors">首页</a>
                    <i class="fa fa-angle-right mx-2 text-xs"></i>';
        the_category(' <i class="fa fa-angle-right mx-2 text-xs"></i> ');
        echo '<i class="fa fa-angle-right mx-2 text-xs"></i>
                    <span class="text-neutral-700">' . get_the_title() . '</span>
                </nav>';

        ?>
    </div>

    <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4">
            <!-- 文章头部 -->
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <article class="mb-12 animate-slide-up">
                        <div class="max-w-4xl mx-auto">
                            <h1 class="text-[clamp(1.75rem,4vw,2.75rem)] font-bold text-neutral-800 mb-4 leading-tight"><?php the_title(); ?></h1>
                            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
                                <div class="flex items-center">
                                    <?php echo get_avatar(get_the_author_meta('ID'), 64, '', get_the_author(), array('class' => 'w-12 h-12 rounded-full object-cover')); ?>
                                    <div class="ml-4">
                                        <h3 class="text-lg font-semibold text-neutral-800"><?php the_author(); ?></h3>
                                        <p class="text-neutral-500 text-sm"><?php the_author_meta('description'); ?></p>
                                    </div>
                                </div>
                                <div class="mt-4 md:mt-0 md:text-right">
                                    <div class="flex flex-wrap items-center justify-start md:justify-end gap-x-4 gap-y-2 text-sm text-neutral-500">
                                        <?php
                                        $categories = get_the_category();
                                        if (!empty($categories)) {
                                            echo '<span class="px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary">' . esc_html($categories[0]->name) . '</span>';
                                        }
                                        ?>
                                        <span>发布于 <?php the_time('Y-m-d'); ?></span>
                                        <span class="flex items-center">
                                            <i class="fa fa-eye mr-1"></i> <?php echo get_post_meta(get_the_ID(), 'post_views_count', true); ?>
                                        </span>
                                        <span class="flex items-center">
                                            <i class="fa fa-comment-o mr-1"></i> <?php comments_number('0', '1', '%'); ?>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>

                    <!-- 文章内容 -->
                    <div class="prose-custom animate-slide-up">
                        <?php the_content(); ?>
                    </div>

                    <!-- 点赞收藏分享 -->
                    <div class="flex items-center space-x-4 my-10 py-6 border-t border-b border-neutral-200">
                        <?php
                        $like_count = get_post_meta(get_the_ID(), '_post_likes_count', true) ?: '0';
                        $has_liked = has_user_liked_post(get_the_ID());
                        $is_favorited = is_post_favorited(get_the_ID());
                        ?>

                        <button id="like-btn" class="flex items-center justify-center px-4 py-2 rounded-full bg-neutral-100 hover:bg-neutral-200 text-neutral-700 transition-all duration-300 shadow-sm transform hover:-translate-y-0.5 disabled:opacity-70 disabled:transform-none <?php echo $has_liked ? 'is-active' : ''; ?>" <?php echo $has_liked ? 'disabled' : ''; ?>>
                            <i class="fa <?php echo $has_liked ? 'fa-thumbs-up' : 'fa-thumbs-o-up'; ?> mr-2"></i>
                            <span><?php echo $has_liked ? '已赞' : '点赞'; ?></span>
                            <span class="ml-2 text-xs font-mono bg-white text-neutral-500 px-2 py-0.5 rounded-full post-likes-count"><?php echo $like_count; ?></span>
                        </button>

                        <button id="favorite-btn" class="flex items-center justify-center px-4 py-2 rounded-full bg-neutral-100 hover:bg-neutral-200 text-neutral-700 transition-all duration-300 shadow-sm transform hover:-translate-y-0.5 <?php echo $is_favorited ? 'is-active' : ''; ?>">
                            <i class="fa <?php echo $is_favorited ? 'fa-heart' : 'fa-heart-o'; ?> mr-2"></i>
                            <span><?php echo $is_favorited ? '已收藏' : '收藏'; ?></span>
                        </button>

                        <button id="share-btn" class="flex items-center justify-center px-4 py-2 rounded-full bg-neutral-100 hover:bg-neutral-200 text-neutral-700 transition-all duration-300 shadow-sm transform hover:-translate-y-0.5">
                            <i class="fa fa-share-square-o mr-2"></i>
                            <span>分享</span>
                        </button>
                    </div>

                    <!-- 评论区 -->
                    <?php comments_template('/comments.php'); ?>
                <?php endwhile;
            else : ?>
                <p><?php esc_html_e('很抱歉，未找到相关内容。'); ?></p>
            <?php endif; ?>
        </div>
        <div class="w-full lg:w-1/3 px-4">
            <?php get_sidebar(); ?>
        </div>
    </div>

</main>

<?php get_footer(); ?>

<script>
    // 滚动进度条逻辑
    const scrollProgress = document.getElementById('scrollProgress');

    window.addEventListener('scroll', () => {
        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = (winScroll / height) * 100;
        scrollProgress.style.width = scrolled + '%';
    });

    // 移动端菜单逻辑
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>
</body>

</html>